<template>
	<div class="table-main">
		<div class="search-container">
			<el-form
				:inline="true"
				:rules="rules"
				:model="form"
				size="small"
				ref="form"
			>
				<el-form-item label="站点:" prop="devId">
					<el-select v-model="form.devId" placeholder="请选择">
						<el-option
							v-for="item in stationList"
							:key="item.id"
							:label="item.cname"
							:value="item.id"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="时间:" prop="month">
					<el-date-picker
						v-model="form.month"
						type="month"
						placeholder="选择月"
						format="yyyy-MM"
						value-format="yyyy-MM"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSeach">查询</el-button>
					<el-button @click="onReset">重置</el-button>
					<el-button @click="onExport">导出</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="table-container report-container">
			<el-table
				:data="reportList"
				style="width: 100%"
				v-loading="loading"
				height="100%"
			>
				<el-table-column prop="date" label="日期"> </el-table-column>
				<el-table-column prop="dailyGeneratingDuration" label="日发电时长（h）">
				</el-table-column>
				<el-table-column prop="pgenDaily" label="日发电量（万度）">
				</el-table-column>
				<el-table-column prop="incomeToday" label="日收益（元）">
				</el-table-column>
			</el-table>
			<div></div>
		</div>
	</div>
</template>

<script>
import { getPvStationList, getPvReport } from "@/api/modules/statement";
export default {
	components: {},
	props: {},
	data() {
		return {
			loading: false,
			stationList: [],
			reportList: [],
			operateType: null,
			form: {
				devId: null,
				month: null,
			},
			rules: {
				month: [
					{
						required: true,
						message: "请选择月份",
						trigger: "change",
					},
				],
				devId: [{ required: true, message: "请选择站点", trigger: "change" }],
			},
		};
	},
	watch: {},
	computed: {},
	mounted() {
		getPvStationList(this.$store.state.oldUserInfo.companyId).then((res) => {
			this.stationList = res.data;
		});
	},
	methods: {
		onSeach() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.loading = true;
					getPvReport(this.form).then((res) => {
						if (res.code == 200) {
							this.reportList = res.data;
							this.loading = false;
						} else {
							this.$Message({
								text: res.msg,
								type: "warning",
							});
						}
					});
				}
			});
		},
		onReset() {
			this.form = {
				devId: null,
				month: null,
			};
			this.reportList = [];
		},
		onExport() {
			const item = this.stationList.find((item) => item.id === this.form.devId);
			const date = this.form.month.replace("-", "年");
			this.download(
				"/pv/exportSubstationPvReport",
				{
					...this.form,
				},
				`${item.cname}站${date}月.xlsx`
			);
		},
	},
};
</script>
<style lang="scss" scoped>
.table-main {
	height: 100%;
	.el-table {
		background-color: transparent;
	}
	.table-container {
		height: calc(100% - 50px);
	}
	.el-button--primary {
		background-color: #045eed;
		border-color: #045eed;
	}
}
</style>
